<template>
  <view class="container">
    
    
    <view class="form-container">
      <view class="info-box">
        <text class="info-text">温馨提示：</text>
        <text class="info-detail">请填写详细地址，现场不能为您留芯，选择线上寄送到登记地址。</text>
      </view>
      
      <view class="form-item">
        <text class="label">姓名 Name：</text>
        <input class="input" type="text" v-model="form.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="label">联系电话 Phone Number：</text>
        <input class="input" type="number" v-model="form.phone" placeholder="请输入手机号码" />
      </view>
      
      <view class="form-item">
        <text class="label">省市区 State/Province/City/District：</text>
        <input class="input" type="text" v-model="form.region" placeholder="请选择省市区" />
      </view>
      
      <view class="form-item">
        <text class="label">详细地址 Detailed Address：</text>
        <input class="input" type="text" v-model="form.address" placeholder="请输入详细地址" />
      </view>
      
      <button class="submit-btn" @click="submit">提交 Save Address</button>
    </view>
    
    <view class="footer">
      <text>成芯软件提供技术支持</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        region: '',
        address: ''
      }
    }
  },
  methods: {
    submit() {
      // 表单验证
      if (!this.form.name || !this.form.phone || !this.form.region || !this.form.address) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      // 提交表单的逻辑
      console.log('地址信息提交', this.form)
      // 将地址信息存储到本地存储，以便在其他页面使用
      uni.setStorageSync('userAddress', this.form)
      // 提交到服务器的代码（可以在这里添加）
      uni.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 跳转到确认提示页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/confirmation/confirmation'
            })
          }, 1500)
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.bg-image {
  width: 100%;
  height: 150px;
  position: relative;
}

.bg-image image {
  width: 100%;
  height: 100%;
}

.bg2-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg2-overlay image {
  max-width: 100%;
  max-height: 100%;
}

.form-container {
  flex: 1;
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 80rpx;
  top: 10px;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info-box {
  background-color: #FFE9D4;
  border: 1rpx solid #FFE9D4;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.info-text {
  color: #fa8c16;
  font-size: 28rpx;
  font-weight: bold;
}

.info-detail {
  display: block;
  color: #fa8c16;
  font-size: 26rpx;
  margin-top: 10rpx;
  line-height: 1.5;
}

.form-item {
  margin-bottom: 60rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
  border-color: #1890ff;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.footer {
  padding: 20rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  background-color: #fff;
}
</style>